<template>
	<div class="my-dialog-rd">
        <transition :name="currentTransition">
            <div class="dialog-box alert-box" v-show="show && type == 'alert'" :class="toastClass" :style="{width: width}">
                {{text}}
            </div>
        </transition>
    </div>
</template>

<style scoped lang="scss">
	.dialog-box{
        position: fixed;
        top:0;
    }

    .alert-box{
        z-index: 5001;
        width: a(300px);
        min-height: 40px;
        font-size:16px;
        padding-top:7px;
        left: 50%;
        margin-left: a(-150px);
        background: hsla(0,0%,7%,.7);
        text-align: center;
        border-radius: 5px;
        color: #fff;

        &.toast-top{
            top:56px;
        }
        &.toast-bottom{
            bottom: 40px;
        }
    }

    .toast-top-enter,.toast-top-leave-active {
        opacity: 0;
        -webkit-transform: translateY(-100%)!important;
        transform: translateY(-100%)!important;
    }

    .toast-top-enter-active,.toast-top-leave-active,{
        -webkit-transition: all .4s cubic-bezier(.36,.66,.04,1);
        transition: all 400ms cubic-bezier(.36,.66,.04,1);
    }
</style>

<script>
	export default{
		name:'my-dialog',
        props: {
            value: Boolean,
            time: {
              type: Number,
              default: 2000
            },
            type: {
              type: String,
              default: 'alert'
            },
            transition: String,
            width: {
              type: String,
              default: '4rem'
            },
            isShowMask: {
              type: Boolean,
              default: false
            },
            text: String,
            position: {
                type:String,
                default: 'top'
            }
        },
        data(){
            return{
                show: false,
            }
        },
        computed:{
            currentTransition () {
              if (this.transition) {
                return this.transition
              }
              switch(this.position){
                case 'top':
                    return 'toast-top';
                    break;
                case 'middle':
                    return 'toast-middle';
                    break;
                case 'bottom':
                    return 'toast-bottom';
                    break;
                default:
                    return 'toast-top';
                    break;
              }
              return 'toast-fade'
            },
            toastClass () {
              return {
                'toast-top': this.position === 'top',
                'toast-bottom': this.position === 'bottom',
                'toast-middle': this.position === 'middle'
              }
            },
        },
        watch:{
            show(val){
                if(val){
                    this.$emit('input', true)
                    clearTimeout(this.timer)
                    this.timer = setTimeout(() => {
                        this.$emit('input', false)
                        this.show = false;
                    },this.time)
                }
            },
            value(val){
                this.show = val
            }
        },
        created () {
            if(this.value) this.show = true
        }
	}

</script>